<script setup lang="ts">
import {CaretBottom, CaretLeft,CaretRight, CaretTop}  from '@element-plus/icons-vue'
import {ref, reactive, onMounted, onUnmounted,watchEffect} from 'vue'
const props = defineProps({
    // 自家位子
    selfSeat: { type: Number, required: true },
    // 正在出牌的位子
    activeSeat: {type: Number, required: false, default: -1}
})

console.log(">>>>>>>>更新了个 setup <<<<<<<<<<<<<<")
const activeClass = ref(false);

let activeInterval:any;

// 获取座次名称 1-东，2-南，3-西，4-北
function getSeatName(seat:Number) {
  if (seat == 1) {
    return '东';
  } else if (seat == 2) {
    return '南';
  } else if (seat == 3) {
    return '西';
  } else if (seat == 4) {
    return '北';
  }
  return '';
}

// 各家位次
const seats = reactive({
  self: -1, // 自己
  previous: -1, //上家
  next: -1, // 下家
  opposite: -1 // 对家
})

const seatsName = reactive({
  self: '', // 自己
  previous: '', //上家
  next: '', // 下家
  opposite: '' // 对家
})

// 分配座次，按照东南西北分配
function distributionSeats() {
  let selfValue = props.selfSeat;
  // 如果自己的东，则上家是北，下家是南，对对家是西
  if (selfValue == 1) {
    seats.previous = 4;
    seats.next = 2;
    seats.opposite = 3;
  } else if(selfValue == 2) {
    seats.previous = 1;
    seats.next = 3;
    seats.opposite = 4;
  } else if(selfValue == 3) {
    seats.previous = 2;
    seats.next = 4;
    seats.opposite = 1;
  } else if(selfValue == 4) {
    seats.previous = 3;
    seats.next = 1;
    seats.opposite = 2;
  }
  seats.self = selfValue;
  seatsName.self = getSeatName(selfValue);
  seatsName.opposite = getSeatName(seats.opposite)
  seatsName.next = getSeatName(seats.next)
  seatsName.previous = getSeatName(seats.previous)
}


function activeTimer() {
  activeInterval = setInterval(() => {
    activeClass.value = !activeClass.value
  }, 1100);
}

function clearActiveInterval() {
  clearInterval(activeInterval);
}

onMounted(() => {
  console.log(">>>>>>>更新了 onMounted<<<<<<<<<<<<<<");
  distributionSeats();
  activeTimer();
})

watchEffect(() => {
  distributionSeats();
})

onUnmounted(() => {
  clearActiveInterval();
})
</script>
<template>
  <div class="seats" :style="{boxShadow: `var(--el-box-shadow-dark)`}">
    <el-icon v-if="props.activeSeat==seats.self" :class="{'seats-self-icon': true, 'seats-icon-active': activeClass }"><CaretBottom /></el-icon>
    <el-icon v-else-if="props.activeSeat==seats.previous" :class="{'seats-previous-icon': true, 'seats-icon-active': activeClass }"><CaretLeft /></el-icon>
    <el-icon v-else-if="props.activeSeat==seats.next" :class="{'seats-next-icon': true, 'seats-icon-active': activeClass }"><CaretRight /></el-icon>
    <el-icon v-else-if="props.activeSeat==seats.opposite" :class="{'seats-opposite-icon': true, 'seats-icon-active': activeClass }"><CaretTop/></el-icon>

    <div :class="{'seats-previous':true, 'seats-active': props.activeSeat==seats.previous && activeClass}">
      {{seatsName.previous}}
    </div>
    <div :class="{'seats-self': true, 'seats-active': props.activeSeat==seats.self && activeClass}">
      {{seatsName.self}}
    </div>
    
    <div :class="{'seats-next':true, 'seats-active': props.activeSeat==seats.next && activeClass}">
      {{seatsName.next}}
    </div>
    <div :class="{'seats-opposite':true, 'seats-active': props.activeSeat==seats.opposite && activeClass}">
      {{seatsName.opposite}}
    </div>
  </div>
</template>
<style scoped lang="scss">
.seats {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #564c4c;
  transform-style: preserve-3d;
  transform: rotateX(40deg);
  border-radius: 10px;
  .el-icon{
    color:  #79bbff;
    font-size: 100px;
    position: absolute;
    transition-property: color;
    transition-duration: 1s;
  }
  div {
    font-size: 20px;
    color: #ffffff;
    font-weight: bold;
    position:absolute;
    line-height: 100%;
    transition-property: color;
    transition-duration: 1s;

  }
  .seats-active,.seats-icon-active {
    color: #3ab03a
  }

  .seats-previous{
    left: 5px;
    top: 40px;
  }
  .seats-previous-icon{
    top:0;
    left: -68px;
  }
  .seats-self{
    bottom: 5px;
    left: 40px;
  }
  .seats-self-icon {
    left: 0;
    bottom: -65px;
  }
  .seats-next {
    right: 5px;
    top: 40px;
  }
  .seats-next-icon{
    top:0;
    right: -65px;
  }
  .seats-opposite {
    top: 5px;
    left: 40px;
  }
  .seats-opposite-icon{
    left: 0;
    top: -71px;
  }
}
</style>